<template>
	<view class="carGoodBox">
		<view class="good-item" v-for="(item,index) in dataList" :key="index">
			<!-- 左边 -->
			<u-checkbox-group class="carGoodLeft">
				<u-checkbox active-color="green" size="18" @change="goClick(index,$event)"></u-checkbox>
			</u-checkbox-group>
			<!-- 右边 -->
			<view class="carGoodRight">
				<view class="carGoodTop" @click="goToDetail(item)">
					<u--image :src="item.travel.content.slice(item.travel.content.indexOf(']')+2,item.travel.content.indexOf('￥')+5)" mode="aspectFill" width="100" height="100" radius='10'></u--image>
					<view class="goodIntroduce">
						<view class="goodDetail">{{item.travel.summary}}</view>
						<view class="goodPrice">石友价：{{item.price}}万</view>
					</view>
				</view>
				
				<view class="carGoodBottom">
					<text class="want-buy">10人想买</text>
					<view class="carGoodBottom-left">
						<view class="find-same"><text class="find-same-text" @click="goDel(item)">删除</text></view>
						<view class="soon-buy" @click="gonavigate('/pages/account/account')"><text class="soon-buy-text">立即购买</text></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			dataList:Array
		},
		data(){
			return{
				price: '',
				priceData: [],
				total: '',
				// isChoice: false,
			}
		},
		methods:{
			// 删除购物车商品
			goDel(item){
				uni.request({
					url: 'http://localhost:3000/order/delete',
					data: {
						orderId: item.orderId
					},
					success: (res) => {
						if (res?.data?.code == 200) {
							this.$u.toast(res?.data?.data?.message);
							this.dataList;
						} else {
							this.$u.toast(res?.data?.data?.message);
						}
					},
					fail: (res) => {
						this.$u.toast(res?.data?.msg);
					}
				})
			},
			//跳转到商品详情页面
			goToDetail(item) {
				uni.navigateTo({
					url: "/pages/goods/detail?travelId="+item.travelId,
				})
			},
			// 跳转页面
			gonavigate(pageUrl) {
				uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
					url: pageUrl
				})
			},
			// 获取checkbox的true/false
			goClick(index,$event){
				// this.isChoice = $event
				if($event==true){
					this.price = this.dataList[index].price
					this.total = +this.price
					// console.log(this.total);
					console.log(this.dataList);
					// this.priceData.push(this.price)
					// console.log(this.priceData);
					// uni.$emit('price',this.dataList[index].price);
				}
				else{
					console.log(false);
					return
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.carGoodBox{
		.good-item{
			display: flex;
			align-items: center;
			background-color: $gs-jpBg;
			border-radius: 10px;
			margin-bottom: $uni-spacing-col-lg;
		}
		
		.carGoodLeft{
			margin-left: $uni-spacing-row-sm;
		}
		.carGoodRight{
			width: 100%;
			.carGoodTop{
				display: flex;
				align-items: center;
				padding-top: $uni-spacing-row-lg;
				.goodIntroduce{
					padding: 0 $uni-spacing-row-base;
					.goodDetail{
						overflow: hidden;
						text-overflow: ellipsis;
						display:-webkit-box; 
						-webkit-box-orient:vertical;
						-webkit-line-clamp:2; 
					}
					.goodPrice{
						font-size: $uni-font-size-base;
						color: $gs-color-red;
						padding: $uni-spacing-row-base 0;
					}
				}
			}
			.carGoodBottom{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: $uni-spacing-row-base 0;
				.want-buy{
					font-size: $uni-font-size-sm;
				}
				.carGoodBottom-left{
					display: flex;
					align-items: center;
					padding: 0 $uni-spacing-row-lg;
					.find-same{
						border: solid 1px;
						border-radius: 20px;
						padding: 0 $uni-spacing-row-base;
						margin: 0 $uni-spacing-row-sm;
						line-height: 20px;
						.find-same-text{
							font-size: $uni-font-size-base;
						}
					}
					.soon-buy{
						border-radius: 20px;
						padding: 1px $uni-spacing-row-base;
						margin: 0 $uni-spacing-row-base;
						background-color: $gs-color-green;
						line-height: 20px;
						.soon-buy-text{
							font-size: $uni-font-size-base;
							color: $uni-text-color-inverse;
						}
					}
				}
				
			}
		}
	}
</style>